<template>
  <page-model :title="pageName">
    <div class="selectionBox">
      <p class="documentName">视频名称</p>
      <el-input v-model="documentName" clearable></el-input>
      <div class="selectDocument" @click="selectDocument">查询</div>
      <div class="reset" @click="reset">重置</div>
    </div>
    <div class="mainBox">
      <header>
        <div class="uploadData" @click="uploadDocList">添加</div>
      </header>
      <table class="mainTable" border="0" cellspacing="0" cellpadding="0">
        <thead>
          <th>序号</th>
          <th>视频名称</th>
          <th>视频描述</th>
          <th>上传时间</th>
          <th>操作</th>
        </thead>
        <tbody v-if="this.$store.state.file.dataList">
          <tr
            v-for="(item, index) in this.$store.state.file.dataList"
            :key="item.learnId"
          >
            <td>{{ index >= 9 ? index + 1 : "0" + (index + 1) }}</td>
            <td>{{ item.modelTitle }}</td>
            <td>{{ item.modelDescribe }}</td>
            <td>{{ item.createTime }}</td>
            <td>
              <span @click="viewDoc(item)">查看</span>
              <span @click="uploadDoc(item)">下载</span>
              <span @click="writeDoc(item)">编辑</span>
              <span @click="deleteDoc(item)">删除</span>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="block" v-if="this.$store.state.file.dataCount">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="this.$store.state.file.dataCount"
        ></el-pagination>
      </div>
      <el-drawer :visible.sync="drawer" :show-close="false">
        <div class="readDrawer">
          <p class="title">视频信息</p>
          <div class="content">
            <p class="name">
              视频名称：<span>{{ drawerData.modelTitle }}</span>
            </p>
            <p class="name mt-30">
              视频描述：<span>{{
                drawerData.modelDescribe ? drawerData.modelDescribe : "无"
              }}</span>
            </p>
          </div>
          <div class="media">
            <div class="picture">
              <img :src="drawerData.modelImg" alt="" />
            </div>
            <div class="video mt-30">
              <video
                :src="drawerData.videoUrl"
                @click="openVideo(drawerData.videoUrl)"
                controls
              ></video>
            </div>
          </div>
        </div>
      </el-drawer>
      <!-- 当表头为空时 -->
      <div class="empty" v-if="!this.$store.state.file.dataCount">
        <img src="@/assets/scene/empty.png" alt class="emptyLogo" />
        <span>空空如也</span>
      </div>
    </div>
    <delete-alert-box
      v-if="isDelete"
      :isDelete="isDelete"
      :descTips="descTips"
      @Confirm="Confirm"
      @Cancel="Cancel"
    ></delete-alert-box>
  </page-model>
</template>
<script>
import { downloadModel } from '@/api/documentModule'
import moment from 'moment'
// // console.log(require)
export default {
  data () {
    return {
      pageName: '数据模型',
      // 当前页
      currentPage: +'',
      // 分页
      drawer: false,
      total: +'',
      index: 1,
      pageSize: 10,
      // 选择类目
      documentName: '',
      drawerData: {
        modelTitle: '',
        modelDescribe: '',
        modelImg: '',
        videoUrl: ''
      },
      descTips: [],
      isDelete: false,
      ids: []
    }
  },
  components: {},
  filters: {
    dateFormat: function (dateStr) {
      return moment(dateStr).format('YYYY-MM-DD HH:mm')
    }
  },
  methods: {
    openVideo (src) {
      // this.$store.commit('set_videoSrc', src)
    },
    titleEvent () {
      this.$router.push('/category2')
    },
    handleCurrentChange (val) {
      // // console.log(val)
      this.index = val
      this.getDataList()
    },
    // 展示列表
    getDataList () {
      const params = {
        pageSize: this.pageSize,
        fileName: this.documentName,
        index: this.index
      }
      this.$store.dispatch('file/upDateDataList', params)
    },
    // 预览文档
    async viewDoc (item) {
      this.drawer = true
      if (Number(item.modelImg) || Number(item.videoUrl)) {
        item.modelImg = await this.$_makeMediaSrc(item.modelImg)
        this.drawerData = item
        item.videoUrl = await this.$_makeMediaSrc(item.videoUrl)
      }
      this.drawerData = item
      // console.log('查看')
    },
    // 下载静态资源
    async uploadDoc (item) {
      const res = await downloadModel(item.modelId)
      // console.log(res)
      this.$_uploadBlobFileLine(res.data, item.modelTitle, 'video/mp4')
    },
    // 编辑文档
    writeDoc (item) {
      this.$router.push('/addModel')
      sessionStorage.setItem('modelId', item.modelId)
    },
    // 删除文档
    deleteDoc (item) {
      this.isDelete = true
      this.ids.push(Number(item.modelId))
      this.descTips = [
        {
          tips: `确定删除"${item.modelTitle}"？`,
          default: ''
        }
      ]
    },
    Confirm () {
      const params = {
        ids: this.ids
      }
      this.$store.dispatch('file/RemoveDataModel', params).then(res => {
        // console.log(res)
        if (res.data.code === 200) {
          this.isDelete = false
          this.$message({
            type: 'success',
            message: res.data.message,
            duration: 500
          })
          this.getDataList()
        }
      })
    },
    Cancel () {
      this.isDelete = false
      // console.log('取消')
    },
    // 查询相关文档
    selectDocument () {
      this.getDataList()
    },
    // 重置文档
    reset () {
      this.documentName = ''
      this.getDataList()
    },
    // 控制更新盒子隐藏
    uploadDocList () {
      sessionStorage.removeItem('modelId')
      this.$router.push('/addModel')
    }
  },
  created () {
    this.getDataList()
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/clickBox.scss";
@import "@/styles/dataModule.scss";
  .mainBox{
    margin-bottom: 30px;
    min-height: calc(100% - 198px);
  }
  .selectionBox .Correlation .el-select{
    left: 186px;
  }
  .selectionBox .documentName{
    left:30px;
  }
  .selectionBox .el-input{
    left: 96px;
  }
  .selectionBox .selectDocument{
    left: 380px;
  }
  .selectionBox .reset{
    left: 480px;
  }
  ::v-deep .el-drawer__header{
  padding: 0;
  margin-bottom: 57px;
}
::v-deep .el-drawer__open .el-drawer.rtl {
  width: 40% !important;
}
::v-deep .el-drawer__body .readDrawer {
  .title {
    height: 48px;
    padding-left: 24px;
    line-height: 48px;
    background: rgba(87, 131, 255, 0.05);
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }
  .content {
    padding-left: 110px;
    padding-top: 48px;
    height: 190px;
    .name {
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 22px;
      span {
        width: 346px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }
    }
  }
  .media {
    .picture,
    .video {
      height: 300px;
      width: 81.24%;
      margin: 0 auto;
      img,
      video {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
